import React, { useEffect, useState } from "react";
import { Popup, NavBar, Input, Card, IndexBar, List } from "antd-mobile";
import { citySet } from "../../../reducers/citySlice";
import { useDispatch } from "react-redux";
import http from '../../../utils/http'

function CityPopup({ visible2, setVisible2, type }) {
    const dispatch = useDispatch();
    // const groups = [];

    const [groups, setGroups] = useState([])
    const [hotCities, setHotCities] = useState([])

    const getCity = async () => {
        const res = await http.get('/api/city')
        const {code, data} = res.data;

        if(code == 200) {
            setGroups(data.city);
            setHotCities(data.hotCities)
        }
    }

    useEffect(() => {
        getCity();
    }, [])

    return (
        <Popup
            // position='right'
            // showCloseButton
            visible={visible2}
            onMaskClick={() => {
                setVisible2(false);
            }}
            onClose={() => {
                setVisible2(false);
            }}
            // 设置 flex 和 flex垂直 布局可以把城市的indexBar组件显示完整
            bodyStyle={{ height: "100vh", width: "100vw", display: "flex", flexDirection: "column" }}
        >
            <NavBar
                onBack={() => {
                    setVisible2(false);
                }}
            >
                <Input placeholder="请输入城市" />
            </NavBar>
            <div className="city_postion">当前定位： 北京</div>
            <Card className="hot_box">
                <h3>热门</h3>
                <div className="hot_flex">
                    {
                        // 根据请求回来的数据渲染的
                        hotCities.map((item, index)=>{
                            return (<span key={index}>{item.name}</span>)
                        })
                    }
                </div>
            </Card>
            <IndexBar>
                {groups.map(group => {
                    const { initial, list } = group; // 改了数据，根据返回的内容改的
                    return (
                        <IndexBar.Panel
                        index={initial}
                        title={`标题${initial}`}
                        key={`标题${initial}`}
                        >
                        <List>
                            {list.map((item, index) => (
                                // item.name 是根据返回的数据修改的
                                <List.Item key={index}>{item.name}</List.Item>
                            ))}
                        </List>
                        </IndexBar.Panel>
                    )
                })}
            </IndexBar>
            {/* <span onClick={() => { 
            dispatch( citySet({type:type, value: '北京'}) )
            setVisible2(false)
         }}>北京</span>
        <span onClick={() => { 
            dispatch( citySet({type:type, value: '天津'}) )
            setVisible2(false)
         }}>天津</span>
        <span onClick={() => { 
            dispatch( citySet({type:type, value: '广州'}) )
            setVisible2(false)
         }}>广州</span> */}
        </Popup>
    );
}

export default CityPopup;
